<template>
  <div>
    <el-row type='flex' justify='space-between' align='middle' class='searchBox'>
      <el-col :span='20'>
        <el-row type='flex' justify='start'>
          <el-col :span='6'>
            角色名称:
            <el-input
              size='medium'
              style='width: 200px'
              v-model='roleModel.name'
              placeholder='角色名称'
              clearable
            />
          </el-col>
        </el-row>
      </el-col>
      <el-col :span='4'>
        <el-button type='primary' @click='search()'>搜索</el-button>
        <el-button type='primary' @click='addRole()'>添加</el-button>
      </el-col>
    </el-row>


    <el-card>
      <el-table class='tableForm' :data='roleData' border>

        <el-table-column width='50' align='center' type='index' label='序号' :index='indexMethod'></el-table-column>

        <el-table-column
          prop='name'
          label='角色名称'
          align='center'>
        </el-table-column>

        <el-table-column
          prop='des'
          label='描述'
          align='center'>
        </el-table-column>

        <el-table-column
          prop='createdDate'
          label='创建时间'
          align='center'>
        </el-table-column>

        <el-table-column
          fixed='right'
          label='操作'
          align='center'>
          <template slot-scope='scope'>
            <el-button @click='editClick(scope.row)' type='text' size='mini'>编辑</el-button>
            <el-button @click='del(scope.row)' type='text' size='mini'>删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change='handleSizeChange'
        @current-change='handleCurrentChange'
        :current-page='roleModel.current'
        :page-sizes='[10, 20, 30]'
        :page-size='roleModel.size'
        layout='total, sizes, prev, pager, next, jumper'
        :total='roleModel.total'>
      </el-pagination>
    </el-card>
    <!-- 添加弹框 -->
    <addRole v-if='addRoleVisible'></addRole>

    <!-- 编辑弹框 -->
    <editRole v-if='editRoleVisible' :editData='editItem'></editRole>

  </div>
</template>
<script>
import addRole from './role/addRole';
import editRole from './role/editRole';

export default {
  components: {
    addRole, editRole,
  },
  data() {
    return {
      roleData: [],
      roleModel: {
        name: '',

        current: 1,
        size: 10,
        total: 0,
      },
      formLabelWidth: '120px',

      //添加
      addRoleVisible: false,
      //编辑
      editRoleVisible: false,
      editItem: {},
    }
  },
  created() {
    this.search();
  },
  mounted() {
    this.$ge.$on('sys-role-change-search', () => {
      this.search();
    });
  },
  computed: {},
  methods: {
    // 分页
    handleSizeChange(val) {
      this.roleModel.size = val;
      this.search();
    },
    handleCurrentChange(val) {
      this.roleModel.current = val;
      this.search();
    },
    //查询角色列表
    search() {
      this.$get('/sys-role/pageList', this.roleModel)
        .then((result) => {
          if (result.code == 200 && result.data) {
            this.roleData = result.data.records;

            this.roleModel.size = result.data.size;
            this.roleModel.total = result.data.total;
            this.roleModel.current = result.data.current;
          }
        })
        .catch((error) => {
          //异常暂定为空
          this.roleData = []
        })
    },
    //添加角色
    addRole() {
      this.addRoleVisible = true;
      let that = this;
      this.$ge.$on('sys-role-close-addRole-finish', () => {
        that.addRoleVisible = false;
      });
    },
    //编辑
    editClick(row) {
      this.editRoleVisible = true;
      this.editItem = row;
      let that = this;
      this.$ge.$on('sys-role-close-editRole-finish', () => {
        that.editRoleVisible = false;
      });
    },
    //删除
    del(row) {
      this.$confirm('已选中：' + row.name + '，删除角色后无法恢复是否确认删除？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$postForm('/sys-role/delete', {
          id: row.id,
        })
          .then((result) => {
            if (result.code == 200) {
              this.$message.success('删除成功');
              this.search();
            } else
              this.$message.error('删除失败');
          })
          .catch((error) => {
            //删除异常
            this.$message.error('删除异常');
          })
      }).catch(() => {
        //取消事件
      });
    },
  },
}
</script>
<style lang='scss' scoped>
//.el-col-20 {
//  text-align: left;
//}
//
//.el-col-4 {
//  text-align: right;
//}
//
//.el-pagination {
//  text-align: right;
//  margin-top: 18px;
//}
</style>
